<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../ajax.js"></script>
  </head>

  <body>
    <script>
      const url = "http://localhost:8000/calc/multiply";

      /* 
      返回一个执行ajax请求的Promise对象 因此后续可以连环回调 
      ？？什么时候回调下一次then或catch呢？？
      等到该Promise对象履约或毁约（resolve/reject）时 才会向后回调
      这个Promise对象会在稍后resolve(2)
      */
      ajaxPromise({
        url,
        data: { a: 1, b: 2 },
      })

      /* 异步回调链 */

      // 前面的promise什么时候resolve，这个then中的回调就什么时候执行
      .then(
          // 入参为2 因为前面的promise向后resolve(2)
          (value) => {
            console.log("then1", value);

            // 如果无需请求服务器就能立刻向后履约6
            // 我自己就能立刻实现我的事业
            // return 6

            // 而事实上乘法是一个复杂的云计算过程 无法立即向后履约新的数据
            // 只好返回一个新的Promise对象 等待其在将来继续向后履约6
            // 我自己不能立即实现我的事业 就寄希望于后人
            return ajaxPromise({
              url,
              data: { a: value, b: 3 },
            });
          }
        )

        // 前面的then中的回调所返回的Promise什么时候履约
        // 这个then就什么时候回调
        .then((value) => {
          console.log("then2", value);

          // 这代人无法完成6*4=24的壮举
          // return 24

          // promise对象变为毁约态 就近找catch回调
          // throw new Error("then二代贪图享乐，葬送国家")

          // 让下一代人继续去完成6*4=24
          // 下一代人会在不久的将来履约24
          return ajaxPromise({
            url,
            data: { a: value, b: 4 },
          });

        })

        // 等着前面的promise履约24
        .then((value) => {
          console.log("then3", value);

          // 这代人完成不了
          // return 24*5

          // 继续寄希望于下一代
          return ajaxPromise({
            url,
            data: { a: value, b: 5 },
          });

        })

        // 前面的Promise履约时回调
        .then((value) => console.log("最终结果", value))

        .catch((err) => console.error("err=", err))

        .finally(() => console.log("game over"));

        /* 同步立即执行 */
        console.log("程序继续执行");
    </script>
  </body>
</html>
